<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <style type="text/css">
        .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
            padding: 4px 2px;
            font-size:10px;
            vertical-align: middle; 
        }
    </style>
    <meta charset="UTF-8">
    <title>收入数据看板</title>
</head>
<body>
<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/income/netflowSource" method="post">
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               #foreach($buss in $businessList)
                               #set($i = $velocityCount - 1)
                                    <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                                #end
                            </select>
                        </div> 

                        <div class="form-group" style="width:180px">
                            <label for="platform">平 台：</label>
                            <select id="platform" name="platform" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="PC" #if("PC" == $!platform) selected #end>PC</option>
                                    <option value="M"  #if("M" == $!platform) selected #end>M</option>
                                    <option value="APP" #if("APP" == $!platform) selected #end>APP</option>
                            </select>
                        </div>   

                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
    </div>

<!-- 0级来源  -->

        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN} - $!{platform}端收入来源类别数据</span>
            </div>
 
            <div class="dataShow">
                <div id='pcSrc_option' dateGrp='stat_date' statType='day'>
                    <form class="form-inline">
                        <label for="beginDate_pcSrc">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_pcSrc" type="text"  class="form-control input-sm time" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="endDate_pcSrc"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_pcSrc" type="text" class="form-control input-sm time" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>

                         <button id="refresh_pcSrc_pie_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                        <div class="form-group input-group input-group-sm" style="width: 13%;margin-left:20%">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pcSrc" type="checkbox">
                            </span>
                            <input id="time_input_pcSrc" type="text" class="form-control input-sm" placeholder="添加对比" disabled>
                        </div>

                        <div class="form-group" style="width:140px; margin-left:5px">
                            <label for="index_pcSrc">指标：</label>
                            <select id="index_pcSrc" class="form-control  input-sm" style="width:90px; ">
                                #foreach($index in ${indexList_EN})
                                    #set($i = $velocityCount - 1)
                                     <option value="$index">$indexList_CN.get($i)</option>
                                #end
                            </select>
                        </div> 

                        <!-- <button id="refresh_pcSrc_line_btn" type="button" class="btn btn-default form-control input-sm">刷新</button> -->

                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnPcSrc" dateGrp='stat_date' statType='day'>日</button>
                            <button type="button" class="btn btn-default btnPcSrc" dateGrp='week_begin' statType='week'>周</button>
                            <button type="button" class="btn btn-default btnPcSrc" dateGrp='month_num' statType='month'>月</button>
                        </div>
                    </form>
                </div>

                <div class="row">
                    <div id="source_pie" class="col-md-6"  style="height:380px;"></div>
                    <div id="source_line" class="col-md-6"  style="height:380px;"></div>
                </div>
             </div><!-- dataShow  -->
           

                <div class="panel-group accordion" id="accordion">
                    <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapse">
                                    指标明细-精准(点击展开) <span id="pcSrcTable_date"></span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <table class="table table-bordered" id="pcSrcTable" >
                                        <thead>
                                          <tr>
                                            <th>来源</th>
                                            <th>总消费</th>
                                            <th>环比</th>
                                            <th>PV</th>
                                            <th>环比</th>                                      
                                            <th>PVR</th>
                                            <th>环比</th>
                                            <th>展现</th>
                                            <th>环比</th>                                            
                                            <th>点击</th>
                                            <th>环比</th>
                                            <th>ASN</th>
                                            <th>环比</th>
                                            <th>ACP</th>
                                            <th>环比</th>
                                            <th>CTR2</th>
                                            <th>环比</th> 
                                            <th>变现率</th>
                                            <th>环比</th>
                                          </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                    </div>
                   
                </div>

        </div> <!-- datacontent  -->



<!--一级来源  -->
        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN} - $!{platform}端收入一级来源数据</span>
            </div>
 
            <div class="dataShow">
                <div id='pcSrc1_option' dateGrp='stat_date' statType='day'>
                    <form class="form-inline">
                        <label for="beginDate_pcSrc1">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_pcSrc1" type="text"  class="form-control input-sm time" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="endDate_pcSrc1"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_pcSrc1" type="text" class="form-control input-sm time" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>

                        <div class="form-group" style="width:130px; margin-left:5px">
                            <label for="source_pcSrc1">来源：</label>
                            <select id="source_pcSrc1" class="form-control  input-sm" style="width:80px; ">
                                <option value="站内">站内</option>
                                <option value="站外免费">站外免费</option>
                                <option value="站外付费">站外付费</option>
                            </select>
                        </div>

                         <button id="refresh_pcSrc1_pie_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                        <div class="form-group input-group input-group-sm" style="width: 13%;margin-left:6%">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pcSrc1" type="checkbox">
                            </span>
                            <input id="time_input_pcSrc1" type="text" class="form-control input-sm" placeholder="添加对比" disabled>
                        </div>

                        <div class="form-group" style="width:140px; margin-left:5px">
                            <label for="index_pcSrc1">指标：</label>
                            <select id="index_pcSrc1" class="form-control  input-sm" style="width:90px; ">
                                #foreach($index in $indexList_EN)
                                    #set($i = $velocityCount - 1)
                                     <option value="$index">$indexList_CN.get($i)</option>
                                #end
                            </select>
                        </div> 

                        <!-- <button id="refresh_pcSrc1_line_btn" type="button" class="btn btn-default form-control input-sm">刷新</button> -->

                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnPcSrc1" dateGrp='stat_date' statType='day'>日</button>
                            <button type="button" class="btn btn-default btnPcSrc1" dateGrp='week_begin' statType='week'>周</button>
                            <button type="button" class="btn btn-default btnPcSrc1" dateGrp='month_num' statType='month'>月</button>
                        </div>
                    </form>
                </div>

                <div class="row">
                    <div id="source1_pie" class="col-md-6"  style="height:380px;"></div>
                    <div id="source1_line" class="col-md-6"  style="height:380px;"></div>
                </div>
             </div><!-- dataShow  -->
           

                <div class="panel-group accordion" id="accordion">
                    <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
                                    指标明细-精准(点击展开) <span id="pcSrc1Table_date"></span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <table class="table table-bordered" id="pcSrc1Table" >
                                        <thead>
                                          <tr>
                                            <th>来源</th>
                                            <th>总消费</th>
                                            <th>环比</th>
                                            <th>PV</th>
                                            <th>环比</th>                                      
                                            <th>PVR</th>
                                            <th>环比</th>
                                            <th>展现</th>
                                            <th>环比</th>                                            
                                            <th>点击</th>
                                            <th>环比</th>
                                            <th>ASN</th>
                                            <th>环比</th>
                                            <th>ACP</th>
                                            <th>环比</th>
                                            <th>CTR2</th>
                                            <th>环比</th> 
                                            <th>变现率</th>
                                            <th>环比</th>
                                          </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                    </div>
                   
                </div>

        </div> <!-- datacontent  -->

<!--二级来源  -->

        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN} - $!{platform}端收入二级来源数据</span>
            </div>
 
            <div class="dataShow">
                <div id='pcSrc2_option' dateGrp='stat_date' statType='day'>
                    <form class="form-inline">
                        <label for="beginDate_pcSrc2">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_pcSrc2" type="text"  class="form-control input-sm time" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="endDate_pcSrc2"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_pcSrc2" type="text" class="form-control input-sm time" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>

                        <div class="form-group" style="width:155px; margin-left:3px">
                            <label for="source_pcSrc2">一级来源：</label>
                            <select id="source_pcSrc2" class="form-control  input-sm" style="width:80px; ">
                                #foreach($src in $!sourceMap.get("source1List_${platform}"))
                                     <option value="$src">$src</option>
                                #end
                            </select>
                        </div>

                         <button id="refresh_pcSrc2_pie_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                        <div class="form-group input-group input-group-sm" style="width: 13%;margin-left:3%">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pcSrc2" type="checkbox">
                            </span>
                            <input id="time_input_pcSrc2" type="text" class="form-control input-sm" placeholder="添加对比" disabled>
                        </div>

                        <div class="form-group" style="width:140px; margin-left:5px">
                            <label for="index_pcSrc2">指标：</label>
                            <select id="index_pcSrc2" class="form-control  input-sm" style="width:90px; ">
                                #foreach($index in $indexList_EN)
                                    #set($i = $velocityCount - 1)
                                     <option value="$index">$indexList_CN.get($i)</option>
                                #end
                            </select>
                        </div> 

                        <!-- <button id="refresh_pcSrc2_line_btn" type="button" class="btn btn-default form-control input-sm">刷新</button> -->

                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnPcSrc2" dateGrp='stat_date' statType='day'>日</button>
                            <button type="button" class="btn btn-default btnPcSrc2" dateGrp='week_begin' statType='week'>周</button>
                            <button type="button" class="btn btn-default btnPcSrc2" dateGrp='month_num' statType='month'>月</button>
                        </div>
                    </form>
                </div>

                
                    <div id="tip_source2" class="row" style="height:380px; width:100%; display:table; ">
                        <div  style="display:table-cell; text-align:center; vertical-align:middle;">
                            <h3>该来源下暂无细分数据,请查看上图。</h3>
                        </div>
                    </div>

                <div id="show_source2"  class="row">
                    <div id="source2_pie" class="col-md-6"  style="height:380px;"></div>
                    <div id="source2_line" class="col-md-6"  style="height:380px;"></div>
                </div>
             </div><!-- dataShow  -->
           

                <div class="panel-group accordion" id="accordion">
                    <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseTwo">
                                    指标明细-精准(点击展开) <span id="pcSrc2Table_date"></span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <table class="table table-bordered" id="pcSrc2Table" >
                                        <thead>
                                          <tr>
                                            <th>来源</th>
                                            <th>总消费</th>
                                            <th>环比</th>
                                            <th>PV</th>
                                            <th>环比</th>                                      
                                            <th>PVR</th>
                                            <th>环比</th>
                                            <th>展现</th>
                                            <th>环比</th>                                            
                                            <th>点击</th>
                                            <th>环比</th>
                                            <th>ASN</th>
                                            <th>环比</th>
                                            <th>ACP</th>
                                            <th>环比</th>
                                            <th>CTR2</th>
                                            <th>环比</th> 
                                            <th>变现率</th>
                                            <th>环比</th>
                                          </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                    </div>
                   
                </div>

    </div> <!-- datacontent  -->  


</div>
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>

<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    var businessName = "$!{businessName}";
    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };

    function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){   //yyyyMMdd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){    //yyyyMM
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

    function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyymm';
        }else{
            datepicker_op.minViewMode=0;
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }


    //格式化输出数字
    function format_number(n){
        var b=parseInt(n).toString(); 
        var len=b.length; 
        if(len<=3){return b;} 
        var r=len%3; 
        return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    };

    //加百分号和样式
    function getRate(floatNum){
         var s=parseFloat(floatNum).toFixed(1)+"%";
         if(floatNum > 0){
            return '<td class="text-danger">' + s + '<i class="upi"></i></td>';
         }else if(floatNum < 0){
             return '<td class="text-success">' + s + '<i class="downi"></i></td>';
         }else{
            return '<td>' + s + '</td>';
         }
    }  

    //格式化输出数字
    function formatNum(n){
        if((n).toString().indexOf(".")>=0){
            return  parsrFloat(n).toFixed(2);
        }else{
            return n;
        }
    };

    function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var stat_type = $(item).attr('statType');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal).attr('statType',stat_type);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });
   
 
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/income"}});
    
    var charts = [];
    // require(
    //         [
    //             'echarts',
    //             'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
    //             'echarts/chart/bar',
    //             'echarts/chart/pie',
    //             'echarts/chart/funnel'

    //         ],
    //     );




    /* 0级来源*/
    require(['dashboard/income_netflow_source_v2'],function(srcEC){
        charts.push(srcEC);
        srcEC.show(businessName);
    });


    /* 一级来源*/
    require(['dashboard/income_netflow_source1_v2'],function(src1EC){
        charts.push(src1EC);
        src1EC.show(businessName);
    });


    /* 二级来源*/
    require(['dashboard/income_netflow_source2_v2'],function(src2EC){
        charts.push(src2EC);
        src2EC.show(businessName);
    });

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.resize();
        });
    });


</script>
</html>